<template>   
    <el-container class="es6-wrap">
          
        <el-container>
            <el-collapse v-model="activeNames" @change="handleChange">
               
                
              <el-collapse-item title="使用及修饰符" name="a">
                 <div>
                    <p>.stop - 调用 event.stopPropagation()。
                  .prevent - 调用 event.preventDefault()。
                  .capture - 添加事件侦听器时使用 capture 模式。
                  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
                  </p>
                  <p>.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。</p>
                  <p>.native - 监听组件根元素的原生事件。</p>
                  <p>.once - 只触发一次回调。</p>
                  <p>.left - (2.2.0) 只当点击鼠标左键时触发。</p>
                  <p>.right - (2.2.0) 只当点击鼠标右键时触发。</p>
                  <p>.middle - (2.2.0) 只当点击鼠标中键时触发。</p>
                  <p>.passive - (2.3.0) 以 { passive: true } 模式添加侦听器</p> 
                </div> 
                      
                <div class="btn" @click="clickFn($event,123)">
                  <button @click.stop="stop()">
                    click me
                  </button>
                </div>   
                
                <div>
                  <input type="text" @keyup="inputFn">    
                  输出：{{inpval}}
                </div>

                <div>
                  <input type="text" @keyup.enter.space=" inpval = $event.target.value">    
                  回车输出：{{inpval}} 
                </div> 
              </el-collapse-item>
               <el-collapse-item title="promise" name="1">
                <div class="btn" @click="imgList()">{{sectionT}}</div>  
                 <img :src="demourl" v-if="isshowimg"  > 
                <div v-else>
                    图片请求超时
                </div>
                <div class="btn" @click="allPromi()">并行执行promise</div>
                 <div class="btn" @click="loadImageAsync()">加载图片</div> 
              </el-collapse-item>
              <el-collapse-item title="vue双向数据绑定model,html输出,只输出一次once,条件渲染 " name="2">
                <div>修饰符
                  <p>
                    .lazy - 取代 input 监听 change 事件;
                  </p>
                  <p>
                    .number - 输入字符串转为数字;
                  </p>
                  <p>
                    .trim - 输入首尾空格过滤;
                  </p>
                  </div>
                  <div>
                    <input type="text" v-model.lazy='modBase'>{{modBase}}
                  </div>
                   <div v-html = "htmlstr">  
                  </div> 
                  <div v-once>
                    {{message}}
                    <button @click="message=123">点击，值修改成123</button>  
                  </div>
                  <div>
                    <p v-if="ifval>5">还有{{ifval}}个</p>
                    <p v-else-if=" ifval >0">速度，只剩下{{ifval}}个</p>
                    <p v-else>
                      已卖完，下回速度哦
                    </p>
                  </div>
                  <template v-if="ifval>0 && ifval<5">
                    注意事项
                    。。。
                  </template>
              </el-collapse-item>
              <el-collapse-item title="列表渲染及开发注意事项" name="3"> 
                  <div v-for="(val,key,index) in obj" :key="val">
                    {{key}}\ {{val}}\ {{index}}
                  </div>
                  <div v-for="(item) in arr" :key="item.name">
                    {{item.name}}
                  </div>
                   <div v-for="htem in activeNames" :key="htem">
                    {{htem}}
                  </div>
                  <div>
                   数据刷新： Vue.set( target, key, value )
                  </div>
                  <div>
                    独特的 key。 会重新渲染
                  </div>
               
              </el-collapse-item>
              <el-collapse-item title="计算属性computed及watch属性" name="4">
                <div> 
                  {{num}}
                </div> 
                <div>
                  {{ fullName}}
                </div>
                <button @click="num++;smeth++">
                  add
                </button>
                <div>
                  {{smeth}}
                </div>
              </el-collapse-item>
              <el-collapse-item title='filter过滤器及样式变换' name='5'>
                  <div :class="[clas.isRadius?'boxradius':'']"  :style="stys" > 
                  {{msg | upperCase}}

                  </div>
              </el-collapse-item>
              <el-collapse-item title='组件传值、props、自定义组件及slot插槽' name='6'>
                  <div>
                      父组件向子组件传值-----通过自定义属性props； 
                      <other :name="othername" @shared="fooshare($event,age)">
                        <div>
                          父组件向子组件插入dom节点-----solt插槽
                        </div>
                        <strong>slot插进来的</strong> 
                        <p>slot插进来的</p> 
                      </other>
                  </div>
                  <div>
                      子组件向父组件传值-----通过自定义事件; {{sharenum}} 
                  </div>
              </el-collapse-item>
              <el-collapse-item title="vur升华" name="7">

              </el-collapse-item>
            </el-collapse>
        </el-container>
           <h2>{{msg}}</h2>
    <input placeholder="输入框" /> 
    </el-container> 
    
    
</template>

<script>
import other from '../components/other' 
export default {
  components:{
    other,
  },
  data() {
    return {
      othername:"美妞",
      sharenum:0,
      stys:{
        background:'pink',
        color:"#fff",
        fontSize:"24px"  
      },
      clas:{
        isRadius:true,
        isBordr:true
      },
      msg:"hello ",
      // smeth:2,
      num:0,
      firstname:'s',
      lastname:"sd",
      activeNames:['7'],
      arr:[{
        name:"例子1"
      },{
        name:"例子2"
      }],
      obj:{
        age:12,
        add:"sd",
        name:'objs'
      },
      demourl: "",
      sectionT: "优化加载图片",
      isshowimg: true, //图片加载成功
      inpval: "", //输入框的值
      modBase: "",
      htmlstr:'<h1>html输出</h1>',
      message:"默认显示",
      ifval:6,
      imgpath:
        "http://upload-images.jianshu.io/upload_images/2956919-2c89d2dde2a7ee0d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1536/q/50"
    };
  },

  filters:{
    upperCase:function(val){
      return val.toString().toUpperCase();
    }
  },
  computed:{
    fullName: function(){
      let sd = this.num +"a"
      console.log(sd)
      return sd
    },
    smeth:{
      get:function(){
        console.log('get')
      },
      set:function(newValue){
        console.log('set:'+newValue)

      }
    }
  },
  // 
  mounted(){
    console.log(123)

  },
  updated() {
    console.log(456)
    
  },
  activated: function() {
      console.log('3')
  },
  deactivated() {
      console.log('4')      
  },
  watch:{
    imgpath(){
       console.log(789)
    }

  },
  methods: {
    //  fullName: function(){
    //   let sd = this.num +"a"
    //   console.log(sd)
    //   return sd
    // },
    fooshare(event,age){
      console.log(event,age)
      this.sharenum++
    },
     handleChange(val) {
        console.log(val);
      },
    clickFn(event, data) {
      console.log(event);
      console.log(data);
    },
    stop() {
      console.log("阻止冒泡事件，不执行clickfn");
    },
    inputFn(event) {
      this.inpval = event.target.value;
    },
    requestImg() {
      let self = this;
      // Promise 新建后立即执行
      // 不管是then或者catch返回的都是一个新的Promise实例！
      // 而每个Primise实例都有最原始的Pending（进行中）到Resolve（已完成），
      // 或者Pending（进行中）到Reject（已失败）的过程
      let pro = new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => {
          resolve(img);
        };
        img.src = require("../assets/demo.png");
      });
      return pro;
    },
    timeOut() {
      let p = new Promise((resolve, reject) => {
        setTimeout(() => {
          //做一些异步操作
          reject("图片请求超时");
        }, 1000);
      });
      return p;
    },
    imgList() {
      let self = this;
      // Promise.race “以谁执行的快，以谁为准执行回调”
      Promise.race([this.requestImg(), this.timeOut()])
        .then(result => {
          console.log("成功" + result);
          self.isshowimg = true;
          self.demourl = result.src;
        })
        .catch(result => {
          console.log("失败" + result);
          self.isshowimg = false;
        });
    },
    //   图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。
    loadImageAsync(url) {
      let sd = new Promise((resolve, reject) => {
        setTimeout(() => {
          //做一些异步操作
          let num = Math.ceil(Math.random() * 10);
          if (num <= 5) {
            resolve(num);
          } else {
            reject(num);
          }
        }, 2000);
      })
        .then(data => {
          console.log("成功:" + data);
          return this.imgshow(data);
        })
        .catch(data => {
          console.log("失败" + data);
        });

      // return sd
    },
    imgshow(data) {
      let p = new Promise((resolve, reject) => {
        console.log("imgshow" + data);
        resolve("成功" + data);
      });
      return p;
    },
    // 并行promise
    allPromi() {
      Promise.race([this.imgshow(1), this.imgshow(2), this.imgshow(3)]).then(
        function(results) {
          console.log(results);
        }
      );
    }
  }
};
</script>
<style>
.es6-wrap {
}
.es6-wrap .el-header,
.es6-wrap .el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  /* line-height: 60px; */
}
.es6-wrap .el-container {
  border-bottom: 1px solid #fff;
}
.es6-wrap .el-aside {
  background-color: #d3dce6;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.es6-wrap .el-aside .btn {
  background-color: mediumaquamarine;
  width: 50%;
  color: #fff;
  border-radius: 5px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.es6-wrap .el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.mainaside {
  flex-direction: column;
  justify-content: flex-start;
}
.mainaside p {
  margin: 0;
}


.el-collapse-item__header{
      background: #71ce70;
}
.el-collapse-item__content{
      border-right: 1px solid #ddd;
}
.boxradius{
  border-radius: 50%
}
</style>
 